<!-- 边界检测，到达边界时回原位 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边界检测，到达边界时回原位</title>
</head>

<body>
    <canvas id="canvas" style="box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);"></canvas>
</body>
<script src="../utils.js"></script>
<script>
    // 小球绘制
    class Ball {
        constructor(options) {
            this.x = 0;
            this.y = 0;
            this.r = 200;
            this.fillStyle = 'blue';
            this.strokeStyle = 'black';
            // 小球缩放
            this.scaleX = 1;
            this.scaleY = 1;
            // 定义小球移动速度
            this.vx = 0;
            this.vy = 0;
            // 小球透明度
            this.alpha = 1;
            Object.assign(this, options);
            return this;
        }
        render(ctx) {
            let { x, y, r, fillStyle, strokeStyle, scaleX, scaleY, alpha } = this;
            // 保存绘图环境
            ctx.save();
            // 开始绘制
            // ctx.beginPath();
            ctx.beginPath();
            ctx.translate(x, y);
            ctx.scale(scaleX, scaleY);
            ctx.strokeStyle = strokeStyle;
            ctx.fillStyle = fillStyle;

            ctx.globalAlpha = alpha;

            ctx.arc(0, 0, r, 0, Math.PI * 2);


            ctx.fill();
            ctx.stroke();
            ctx.restore();
            ctx.closePath();
            return this;
        }
    }
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let w = canvas.width = 800;
    let h = canvas.height = 800;
    let ball = new Ball({
        x: w / 2,
        y: h / 2,
        r: 50,
        fillStyle: 'red',
        strokeStyle: 'black',
        scaleX: 1,
        scaleY: 1,
        alpha: 1,
        vx: 0,
        vy: 0,
    });

    // 存放所有小球实例
    let balls = [];
    // 定义小球实例数
    let number = 100;

    for (let i = 0; i < number; i++) {
        balls[i] = new Ball({
            x: w / 2,
            y: h,
            r: c.rand([5, 50]),
            fillStyle: `rgb(${c.rand([50, 255])},${c.rand([50, 255])},${c.rand([50, 255])})`,
            strokeStyle: 'black',
            scaleX: 1,
            scaleY: 1,
            alpha: 1,
            vx: c.rand([-10, 10]),
            vy: c.rand([0, 10]),
        });
    }
    balls.forEach((item) => {
        item.render(ctx);
    });
    // 重力
    let g = -0.01;

    (function move() {
        window.requestAnimationFrame(move);
        ctx.clearRect(0, 0, w, h);
        balls.forEach((item) => {

            item.x = item.x + item.vx;
            item.y = item.y - item.vy;
            // item.vy = item.vy + g;
            if (item.x - item.r > w || item.x + item.r < 0 || item.y - item.r > h || item.y + item.r < 0) {
                item.y = h;
                item.x = w / 2;
                item.vx = c.rand([-10, 10]);
                item.vy = c.rand([0, 10]);
            }

            item.render(ctx);
        });
    })()

</script>

</html>